<template>
   <!-- @touchstart="startTouch" @touchend="endTouch" -->
  <view @click='clickView'>
    <search id='1111'></search>
      <view class="user" >
        <!-- 包含上下两列 -->
        <view class="user_col1">
          <!-- 上列 -->
          <image class="userinfo-avatar" src="/static/my/user-image.png"></image>
          <view class="user_col_center">
            <!-- 上列右边小行 -->
            <view>
              <text class="user_name">微信用户</text>
            </view>
          </view>
          <view class="user_col_right_text">
            <text class="user_col_right_text_1">0</text>
            <text>关注</text>
          </view>
          <view>
            <text class="user_col_right_text_1">0</text>
            <text>新歌</text>
          </view>
        </view>
        <view class="user_col2">
          <!-- 下列 -->
          <view>
            <image src="/static/my/active-center.png"></image>
            <text>活动中心</text>
          </view>
          <view>
            <image src="/static/my/vip-center.png"></image>
            <text>会员中心</text>
          </view>
          <view>
            <image src="/static/my/dayon.png"></image>
            <text>每日签到</text>
          </view>
        </view>

      </view>
      <!-- 个人收藏区域 -->
      <view class="my_have">
        <view>
          <image src="/static/my/collect.png"></image><text>收藏</text>
        </view>
        <view>
          <image src="/static/my/local.png"></image><text>本地</text>
        </view>
        <view>
          <image src="/static/my/gedan.png"></image><text>歌单</text>
        </view>
        <view>
          <image src="/static/my/song-program.png"></image><text>有声节目</text>
        </view>
        <view>
          <image src="/static/my/have-buy.png"></image><text>已购</text>
        </view>
      </view>
      <!-- 自建歌单区域 -->
      <view class="my_gedan">
        <view>
          <text>自建歌单</text>
          <view class="my_gedan_more">
            <text class="my_gedan_right_text">更多</text>
            <uni-icons type="forward" color="#7A7A7A" size="20"></uni-icons>
          </view>
        </view>
        <view>
          <view>
            <view>
              <image src="/static/my/install.png"></image>
            </view>
            <text>新建歌单</text>
          </view>
          <view>
            <view>
              <image src="/static/my/import.png"></image>
            </view>
            <text>导入外部歌单</text>
          </view>
          <view>
          </view>
        </view>
      </view>

      <!-- 发现更多音乐 -->
      <view class="my_more_gedan">
        <text>发现更多音乐 ></text>
      </view>
    <music></music>
  </view>
</template>

<script>
  export default {
    data() {
      return {
          hidden:true,
          clientX: 0,
          clientY: 0,
        }
      },
    
    methods:{
      clickView(e){  //点击页面
        if(e.target.id==1111){  //判断点击了搜索框
          uni.navigateTo({
            url:"/pages/search/search"
          })
        }
      },
      
    },
    onHide(){
      console.log("my 页面隐藏")
      uni.$emit("clearnInput",'')
      this.hidden=true
    }

  }
</script>

<style lang="scss">
  /**index.wxss**/
  /* /---------  整体大类 ---------/ */

  .content-black {
    margin-bottom: 300rpx;
  }

  /* /---------  个人区域 ---------/ */
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255, 255, 255);
    width: 85%;
    height: 200rpx;
    margin: 0 auto;
    background-color: #282828;
    padding: 20rpx;
    border-radius: 20rpx;
  }

  .user_col1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #909090;
    font-size: 30rpx;
  }

  .user_col_center {
    width: 45%;
    display: flex;
    text-align: left;
    flex-direction: column;
    justify-content: flex-start;
    color: rgb(255, 255, 255);
  }

  .user_name {
    font-weight: bold;
    font-size: 35rpx;
    padding-left: 5rpx;
  }

  .user_col_center>view {
    width: 100%;
  }


  .user_col1>view {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    overflow: hidden;
    width: 90rpx;
    height: 90rpx;
    margin: 20rpx 30rpx 20rpx 20rpx;
    border-radius: 100%;
  }

  .user_col_right_text {
    margin: 0 6%;
  }

  .user_col_right_text_1 {
    color: #FEFEFE;
    font-family: "圆体";
    font-weight: 300;
    font-size: 35rpx;
    margin: 10% 0;
  }

  /* --------------  用户区块下列区域  ---------------- */
  .user_col2,
  .user_col2 view {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    color: #909090;
    margin: 8rpx 0 0 5rpx;
    font-size: 30rpx;
  }

  .user_col2 image {
    width: 50rpx;
    height: 50rpx;
    margin: 0 10rpx;
  }

  /* --------------  个人收藏区域  ---------------- */
  .my_have {
    display: flex;
    padding: 15rpx 0;
    background-color: #1A1A1A;
    width: 100%;
    height: 170rpx;
    margin: 40rpx auto 0 auto;
    border-radius: 20rpx;
    overflow-x: scroll;
    text-align: left;
    color: white;
  }

  .my_have::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .my_have image {
    width: 200rpx;
    height: 110rpx;
    padding-left: 30rpx;
  }

  .my_have text {
    width: 200rpx;
    height: 60rpx;
    padding-left: 30rpx;
  }

  /* --------------  自建歌单区域  ---------------- */
  .my_gedan {
    width: 90%;
    display: flex;
    flex-direction: column;
    color: white;
    margin: 0 auto;

    >view:nth-child(1) {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      font-size: 33rpx;
      font-weight: bold;
      .my_gedan_more {
        display: flex;
        flex-direction: row;
        align-items: center;
        .my_gedan_right_text {
          font-size: 28rpx;
        }
      }

    }




    >view:nth-child(2) {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      font-size: 28rpx;
      font-weight: 300;

      >view {
        width: 31%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        view {
          width: 100%;
          height: 190rpx;
          background-color: #282828;
          border-radius: 15rpx;
          position: relative;
          margin: 30rpx 0;
        }

        image {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50rpx;
          height: 50rpx;

        }
      }
    }

  }



  /* --------------  发现更多音乐区域  ---------------- */
  .my_more_gedan {
    width: 100%;
    padding: 70rpx 0;
    text-align: center;
    color: #7c7c7c;
    font-size: 27rpx;
  }
</style>
